<HTML>
<HEAD>
<TITLE>MobWrite as a Collaborative Spreadsheet</TITLE>
<STYLE type="text/css">
BODY {
  background-color: white;
  font-family: sans-serif;
}
H1, H2, H3 {
  font-weight: normal;
}
TABLE {
  border-collapse: collapse;
}
TD {
  text-align: center;
  border: 1px solid #888;
}
TD.left {
  background-color: #ccc;
  width: 2em;
}
TD.top {
  background-color: #ccc;
}
INPUT {
  border: 0;
  text-align: right;
  width: 100%;
}
</STYLE>
<SCRIPT SRC="../compressed_form.js"></SCRIPT>
<!--
<SCRIPT SRC="../diff_match_patch_uncompressed.js"></SCRIPT>
<SCRIPT SRC="../mobwrite_core.js"></SCRIPT>
<SCRIPT SRC="../mobwrite_form.js"></SCRIPT>
-->
</HEAD>
<BODY ONLOAD="mobwrite.share('demo_spreadsheet');">

<TR><TD HEIGHT=1><H1>MobWrite as a Collaborative Spreadsheet</H1></TD></TR>

<FORM ID="demo_spreadsheet" ONSUBMIT="return false">
<TABLE WIDTH="50%">
<SCRIPT><!--
var cols = 5;
var rows = 10;

document.write('<TR><TD CLASS="top left"></TD>');
for (var x = 1; x <= cols; x++) {
  var letter = String.fromCharCode(x + 64);
  if (letter == 'I') {
    // Prevent column 'I' from collapsing in IE.
    letter = '&nbsp;I&nbsp;';
  }
  document.write('<TD CLASS="top" ID="top_' + x + '">' + letter + '</TD>');
}
document.write('</TR>\n');

for (var y = 1; y <= rows; y++) {
  document.write('<TR><TD CLASS="left" ID="left_' + y + '">' + y + '</TD>');
  for (var x = 1; x <= cols; x++) {
    document.write('<TD><INPUT ID="demo_spreadsheet_' + x + '_' + y + '" ONFOCUS="highlight(this.id, true)" ONBLUR="highlight(this.id, false)"></TD>');
  }
  document.write('</TR>\n');
}

function highlight(id, on) {
  var cell = document.getElementById(id).parentNode;
  cell.style.backgroundColor = on ? '#008' : '#fff';
  var m = id.match(/_(\d+)_(\d+)$/);
  if (m) {
    var x = parseInt(m[1], 10);
    var y = parseInt(m[2], 10);
    cell = document.getElementById('top_' + x);
    cell.style.backgroundColor = on ? '#aaf' : '#ccc';
    cell = document.getElementById('left_' + y);
    cell.style.backgroundColor = on ? '#aaf' : '#ccc';
  }
}


//--></SCRIPT>
</TABLE>
</FORM>

</BODY>
</HTML>
